<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <title>ECharts China Map</title>
    <style>
      #china-map {
        width: 60%;
        height: 60%;
        position:fixed;
        /*left: calc(50% - 500px);*/
        top: 15%;
        /*border: 1px solid black;*/
      }
      #detial{
        height: 50%;
        width: 30%;
        margin-top: 15%;
        float: right;
        margin-right: 10%;
        border: 1px solid black;
      }
      .custom-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    </style>
    <script
      type="text/javascript"
      src="https://unpkg.com/echarts/dist/echarts.min.js"
    ></script>
    <script type="text/javascript" src="./js/map/china.js"></script>
  </head>

  <body>
    <button id="back" style="display: none">返回全国</button>
    <div id="china-map"></div>
    <div id="detial">11111</div>
    <!-- 自定义的提示框 -->
    <div id="customPopup" class="custom-popup"></div>
    <script>
      var myChart = echarts.init(document.getElementById("china-map"));
      var oBack = document.getElementById("back");

      var catches = {};

      var provinces = [
        "shanghai",
        "hebei",
        "shanxi",
        "neimenggu",
        "liaoning",
        "jilin",
        "heilongjiang",
        "jiangsu",
        "zhejiang",
        "anhui",
        "fujian",
        "jiangxi",
        "shandong",
        "henan",
        "hubei",
        "hunan",
        "guangdong",
        "guangxi",
        "hainan",
        "sichuan",
        "guizhou",
        "yunnan",
        "xizang",
        "shanxi1",
        "gansu",
        "qinghai",
        "ningxia",
        "xinjiang",
        "beijing",
        "tianjin",
        "chongqing",
        "xianggang",
        "aomen",
      ];

      var provincesText = [
        "上海",
        "河北",
        "山西",
        "内蒙古",
        "辽宁",
        "吉林",
        "黑龙江",
        "江苏",
        "浙江",
        "安徽",
        "福建",
        "江西",
        "山东",
        "河南",
        "湖北",
        "湖南",
        "广东",
        "广西",
        "海南",
        "四川",
        "贵州",
        "云南",
        "西藏",
        "陕西",
        "甘肃",
        "青海",
        "宁夏",
        "新疆",
        "北京",
        "天津",
        "重庆",
        "香港",
        "澳门",
      ];

      oBack.onclick = function () {
        loadMap("china", "中国");

        oBack.style.setProperty('display', 'none');
      };

      loadMap("china", "中国");

      // 加载地图
      function loadMap(mapType, name) {
        var option = {
          title: {
            text: name || mapType,
            left: "center",
          },
          series: [
            {
              name: name || mapType,
              type: "map",
              mapType,
              roam: false, //是否开启鼠标缩放和平移漫游
              itemStyle: {
                //地图区域的多边形 图形样式
                normal: {
                  //是图形在默认状态下的样式
                  label: {
                    show: true, //是否显示标签
                    textStyle: {
                      color: "rgba(255,255,255,0)",
                    },
                  },
                },
              },
              aspectScale: mapType === "china" ? 0.75 : 1,
              top: "10%", //组件距离容器的距离
            },
          ],
        };

        // 清理画布
        myChart.clear();

        myChart.setOption(option);

        myChart.off("click");

        if (mapType === "china") {
          // 全国时，添加click 进入省级
          myChart.on("click", function (param) {
            //遍历取到provincesText 中的下标  去拿到对应的省js
            for (var i = 0; i < provincesText.length; i++) {
              if (param.name === provincesText[i]) {
                //显示对应省份的方法
                showProvince(provinces[i], provincesText[i]);
                break;
              }
            }

            oBack.style.setProperty('display', 'block');
          });
          myChart.on("mouseover", function(param){
            console.log(param);
            var elementInfo = "";
            elementInfo = elementInfo.concat(param.name);
            elementInfo = elementInfo.concat("网点地址：<br>");
            elementInfo =  elementInfo.concat("网点面积<br>");
            elementInfo = elementInfo.concat("网点联系方式<br>");
            elementInfo = elementInfo.concat("网点服务：<br>");
            console.log(elementInfo);


            var myDiv = document.getElementById("detial");

            customPopup.textContent = elementInfo;
            myDiv.innerHTML = elementInfo;
          });
        } else {
          // // 省份，添加双击 回退到全国
          myChart.on("click", function (param) {
            console.log(param);
            var elementInfo = "";
            elementInfo = elementInfo.concat(param.name);
            elementInfo = elementInfo.concat("网点地址：<br>");
            elementInfo =  elementInfo.concat("网点面积<br>");
            elementInfo = elementInfo.concat("网点联系方式<br>");
            elementInfo = elementInfo.concat("网点服务：<br>");
            console.log(elementInfo);


            var myDiv = document.getElementById("customPopup");

  
          // 设置提示框的内容
          customPopup.textContent = elementInfo;
          myDiv.innerHTML = elementInfo;
          
          // 显示自定义的提示框
          customPopup.style.display = "block";
          });
          // 省份，添加双击 回退到全国
          myChart.on("dblclick", function () {
            // console.log(param);
            // loadMap("china", "中国");
          });
        }
      }

      // 隐藏提示框
      customPopup.addEventListener("click", function() {
        customPopup.style.display = "none";
      });

      // 展示对应的省
      function showProvince(mapType, name) {
        //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
        if (catches[name]) {
          loadMap(name);
        } else {
          catches[mapType] = true;

          loadBdScript(
            "$" + mapType + "JS",
            "./js/map/province/" + mapType + ".js",
            function () {
              loadMap(name);
            }
          );
        }
      }

      // 加载对应的JS
      function loadBdScript(scriptId, url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        if (script.readyState) {
          //IE
          script.onreadystatechange = function () {
            if (
              script.readyState === "loaded" ||
              script.readyState === "complete"
            ) {
              script.onreadystatechange = null;
              callback();
            }
          };
        } else {
          // Others
          script.onload = function () {
            callback();
          };
        }
        script.src = url;
        script.id = scriptId;
        document.getElementsByTagName("head")[0].appendChild(script);
      }
    </script>
  </body>
</html>
